<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="LeftEvent">
    <div class="h_info">
      <text style="width: 60px">{{ selectedPel.events[Key].label }}</text>
      <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px" v-model:value="selectedPel.events[Key].enable" />
    </div>
    <n-divider>链接数据</n-divider>
    <!--链接数据  -->
    <NSelect style="margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
      v-model:value="selectedPel.events[Key].opt_send_set" :options="sendSetOpt" />
    <div style="height: 10px;"></div>
    <!-- 判断-链接图元数据变量 -->
    <template v-if="selectedPel.events[Key].opt_send_set === 1" class="h_info">
      <NSelect style="margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
        v-model:value="canvasStore.selectedPel.events[Key].link_key" :options="pelDataOpt" />
    </template>

    <!-- 判断-链接设备数据变量 -->
    <template v-if="selectedPel.events[Key].opt_send_set === 2" class="h_info">
      <NSelect style="margin-left: 5px; margin-right: 5px" ssize="small"
        v-model:value="canvasStore.selectedPel.events[Key].link_key" :options="writeEquipDataOpt" />
    </template>

    <n-divider>发送</n-divider>
    <div class="h_info">
      <text class="h_info_lable">发送类型:</text>
      <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
        v-model:value="selectedPel.events[Key].opt_send_type" :options="sendTypeOpt" />
    </div>
    <div class="h_info" v-if="selectedPel.events[Key].opt_send_type === 1">
      <!-- 文本 -->
      <text class="h_info_lable">发送文本:</text>
      <div class="h_flex_column h_info_val">
        <NInput type="text" v-model:value="canvasStore.selectedPel.events[Key].send_text" />
      </div>
    </div>
    <!-- 颜色 -->
    <div class="h_info" v-if="selectedPel.events[Key].opt_send_type === 2">
      <text class="h_info_lable">发送颜色:</text>
      <NColorPicker class="h_info_val" v-model:value="canvasStore.selectedPel.events[Key].send_colour"
        :actions="['confirm']" :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 动画参数状态-动画键 */
let Key = String(canvasStore.eventKey);
/** 选择的图元数据 */
let selectedPel = computed(() => canvasStore.selectedPel);
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 从静态存储 引入 选项
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/** 图元数据选项 */
const pelDataOpt = canvasStore.pelDataOpt;
/** 设备数据写选项 */
const writeEquipDataOpt = canvasStore.writeEquipDataOpt;
/** 父链接数据_选项:0_父数据; 1_图元数据;2_设备数据 */
const sendSetOpt = staticStore.sendSetOpt;
/** 发送数据类型选项 */
const sendTypeOpt = staticStore.sendTypeOpt;
/** 颜色选项卡 */
const colorOpt = staticStore.colorOpt;
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
.LeftEvent {
  width: 100%;
  height: 90vh;
  user-select: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  font-size: 14px;
  color: #ffffff;
  background-color: rgb(80,80,80);
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 5px;
}
</style>
